<template>
	<div class="my-items-list h100 flex-col p-10">
		<div class="m-b-10">
			<el-button type="primary" icon="CirclePlus" @click="insertFn()">新增组件</el-button>
		</div>

		<my-list-panel ref="refTable" :total="state.total" :loadFn="loadData">
			<div class="f1 h0 overflow-y-auto">
				<n-grid :x-gap="10" :y-gap="10" cols="s:2 m:3 l:4 xl:6 xxl:6" responsive="screen">
					<n-grid-item v-for="item in state.list" :key="item.id">
						<ItemsCard
							:cardData="item"
							:detailFn="detailFn"
							:updateFn="updateFn"
							:deleteFn="deleteFn"
							@resetFn="refTable.reload()"
						/>
					</n-grid-item>
				</n-grid>
			</div>
		</my-list-panel>

		<!-- 新增组件 -->
		<el-dialog
			:title="dialogTitle"
			v-model="dialog.open"
			width="600px"
			append-to-body
			@closed="resetForm(refDialogForm)"
		>
			<my-form
				ref="refDialogForm"
				:model="dialog.form"
				label-width="110px"
				:disabled="['detail'].includes(dialog.name)"
				:formItem="[
					{ prop: 'title', label: '名称', required: true },
					{ prop: 'icon', label: '图标', required: true },
					{
						prop: 'zipFileInfo',
						label: '上传压缩文件',
						itemType: 'file',
						required: true,
						accept: '.zip',
						fileType: ['zip']
					},
					{ prop: 'historyVersion', label: '版本记录', if: ['detail'].includes(dialog.name) }
				]"
			>
				<template #icon="{ model, prop }">
					<my-select filterable v-model="model[prop]" placeholder="请选择菜单图标">
						<template #prefix> <my-icon :icon="model[prop]" /> </template>
						<el-option
							v-for="item in [...$store.user.svgIcons, ...$store.user.elIcons]"
							:key="item"
							:label="item"
							:value="item"
						>
							<my-icon :icon="item" />
							<span class="fr">{{ item }}</span>
						</el-option>
					</my-select>
				</template>
				<template #historyVersion="{ model, prop }">
					<my-table
						:data="model[prop]"
						:columns="[
							{
								label: '名称',
								prop: 'xvueNameSpace',
								align: 'center'
							},
							{
								label: '版本',
								prop: 'version',
								align: 'center',
								width: 100
							}
						]"
						max-height="200"
					>
						<template #empty> 暂无数据 </template>
					</my-table>
				</template>
			</my-form>
			<template #footer>
				<el-button @click.prevent="dialog.open = false">取 消</el-button>
				<el-button
					type="primary"
					@click.prevent="
						() =>
							dialogSubmitFn((data) => {
								// 组件文件数据处理
								if (data.zipFileInfo.length) data.zipFileInfoId = data.zipFileInfo[0].id;
								delete data.zipFileInfo;
								delete data.version;
							})
					"
					>确 定</el-button
				>
			</template>
		</el-dialog>
	</div>
</template>

<script setup name="/module">
import ItemsCard from './ItemsCard.vue';
import { addModule, removeModule, editModule, pageModule, infoModule } from '@/api/module';

/************************************项目列表************************************/
let state = reactive({
		total: 0,
		list: []
	}),
	// 弹出层
	dialog = reactive({
		title: '组件',
		open: false,
		name: '',
		form: {
			id: '',
			zipFileInfo: []
		}
	});

const { refTable, refDialogForm, dialogTitle, loadData, insertFn, deleteFn, updateFn, detailFn, dialogSubmitFn } =
	pageMixin({
		state,
		api: { page: pageModule, remove: removeModule, add: addModule, edit: editModule, info: infoModule },
		dialog
	});
</script>

<style lang="scss" scoped>
$contentHeight: 250px;
@include b('items-list') {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	.list-content {
		position: relative;
		height: $contentHeight;
	}
	.list-pagination {
		display: flex;
		justify-content: flex-end;
		margin-top: 20px;
	}
}
</style>
